<template>
  <div class="gantt-container">
    <!-- 控制栏 -->
    <div class="gantt-header">
      <div class="header-left">
        <span class="title">生产调度甘特图</span>
        <span class="subtitle">设备工序安排总览</span>
      </div>
      
      <div class="header-controls">
        <!-- 时间单位选择 -->
        <div class="control-group">
          <label>时间单位：</label>
          <el-select v-model="timeUnit" size="small" style="width: 100px;" @change="onTimeUnitChange">
            <el-option label="小时" value="hour" />
            <el-option label="日" value="day" />
            <el-option label="周" value="week" />
            <el-option label="月" value="month" />
          </el-select>
        </div>

        <!-- 时间范围选择 -->
        <div class="control-group">
          <label>时间范围：</label>
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            size="small"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            @change="onDateRangeChange"
            style="width: 240px;"
          />
        </div>

        <!-- 搜索框 -->
        <div class="control-group">
          <el-input
            v-model="searchKeyword"
            placeholder="搜索设备或工序..."
            size="small"
            style="width: 200px;"
            @input="onSearch"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </div>

        <!-- 刷新按钮 -->
        <el-button type="primary" class="idoo-details-button" size="small" @click="refreshData">
          <el-icon><Refresh /></el-icon>
          刷新
        </el-button>
      </div>
    </div>

    <!-- 甘特图主体 -->
    <div class="gantt-main" ref="ganttMainRef">
      <!-- 左侧设备列表 -->
      <div class="gantt-sidebar">
        <div class="sidebar-header">
          <div class="device-column">设备</div>
          <div class="status-column">状态</div>
          <div class="utilization-column">利用率</div>
        </div>
        
        <div class="sidebar-body">
          <div 
            v-for="device in filteredDevices" 
            :key="device.id"
            class="device-row"
            :class="{ 'selected': selectedDeviceId === device.id }"
            @click="selectDevice(device.id)"
          >
            <div class="device-column">
              <div class="device-name">{{ device.equipName }}</div>
              <div class="device-info">{{ device.equipType }}</div>
            </div>
            <div class="status-column">
              <el-tag :type="device.statusType" size="small">{{ device.status }}</el-tag>
            </div>
            <div class="utilization-column">
              <div class="utilization-bar">
                <div 
                  class="utilization-fill" 
                  :style="{ width: device.utilization + '%', backgroundColor: getUtilizationColor(device.utilization) }"
                ></div>
                <span class="utilization-text">{{ device.utilization }}%</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧甘特图表 -->
      <div class="gantt-chart" ref="ganttChartRef">
        <!-- 时间轴头部 -->
        <div class="timeline-header">
          <div 
            v-for="timeSlot in timelineData" 
            :key="timeSlot.key"
            class="time-slot"
            :style="{ width: timeSlot.width + 'px' }"
          >
            <div class="time-label">{{ timeSlot.label }}</div>
            <div class="time-sub" v-if="timeSlot.subLabel">{{ timeSlot.subLabel }}</div>
          </div>
        </div>

        <!-- 甘特图内容区 -->
        <div class="gantt-content">
          <div 
            v-for="device in filteredDevices" 
            :key="device.id"
            class="gantt-row"
            :class="{ 'selected': selectedDeviceId === device.id }"
          >
            <!-- 时间槽背景 -->
            <div class="time-slots">
              <div 
                v-for="timeSlot in timelineData" 
                :key="`${device.id}-${timeSlot.key}`"
                class="time-slot-bg"
                :style="{ width: timeSlot.width + 'px' }"
                :class="{ 'weekend': timeSlot.isWeekend, 'today': timeSlot.isToday }"
              ></div>
            </div>

            <!-- 工序任务条 -->
            <div class="tasks-container">
              <div 
                v-for="task in device.tasks" 
                :key="task.id"
                class="task-bar"
                :style="getTaskStyle(task)"
                @click="selectTask(task)"
                @mouseenter="showTaskTooltip(task, $event)"
                @mouseleave="hideTaskTooltip"
              >
                <div class="task-content">
                  <span class="task-name">{{ task.productName }}</span>
                  <span class="task-progress">{{ task.progress }}%</span>
                </div>
                <div class="task-progress-bar">
                  <div 
                    class="task-progress-fill" 
                    :style="{ width: task.progress + '%' }"
                  ></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 任务详情提示框 -->
    <div 
      v-show="tooltipVisible" 
      class="task-tooltip"
      :style="tooltipStyle"
    >
      <div v-if="selectedTask">
        <div class="tooltip-title">{{ selectedTask.productName }}</div>
        <div class="tooltip-content">
          <div><strong>设备：</strong>{{ selectedTask.deviceName }}</div>
          <div><strong>产品：</strong>{{ selectedTask.processProductName }}</div>
          <div><strong>开始时间：</strong>{{ selectedTask.processStartTime }}</div>
          <div><strong>结束时间：</strong>{{ selectedTask.processEndTime }}</div>
          <div><strong>进度：</strong>{{ selectedTask.progress }}%</div>
          <div><strong>数量：</strong>{{ selectedTask.processCount }}件</div>
          <div><strong>状态：</strong>
            <el-tag :type="selectedTask.statusType" size="small">{{ selectedTask.status }}</el-tag>
          </div>
        </div>
      </div>
    </div>

    <!-- 图例 -->
    <div class="gantt-legend">
      <div class="legend-title">工序状态图例</div>
      <div class="legend-items">
        <div class="legend-item">
          <div class="legend-color" style="background-color: #67C23A;"></div>
          <span>已完成</span>
        </div>
        <div class="legend-item">
          <div class="legend-color" style="background-color: #409EFF;"></div>
          <span>进行中</span>
        </div>
        <div class="legend-item">
          <div class="legend-color" style="background-color: #E6A23C;"></div>
          <span>待开始</span>
        </div>
        <div class="legend-item">
          <div class="legend-color" style="background-color: #F56C6C;"></div>
          <span>延期</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import { Search, Refresh } from '@element-plus/icons-vue'
import { apsSchedulingResultApi } from '@/api/apsSchedulingResult'

export default {
  name: 'SchedulingGantt',
  components: {
    Search,
    Refresh
  },
  setup() {
    // ============== 1. 响应式数据 ==============
    
    const timeUnit = ref('day')
    const dateRange = ref(['2025-10-01', '2025-10-15'])
    const searchKeyword = ref('')
    const selectedDeviceId = ref(null)
    const selectedTask = ref(null)
    const tooltipVisible = ref(false)
    const tooltipStyle = ref({})
    
    const ganttMainRef = ref(null)
    const ganttChartRef = ref(null)

    // 模拟设备数据
    const devicesData = ref([]);
        // [
      // {
      //   id: 'A-1',
      //   equipName: 'A-1生产线',
      //   equipType: '注塑设备',
      //   status: '运行中',
      //   statusType: 'success',
      //   utilization: 85,
      //   tasks: [
      //     {
      //       id: 'T001',
      //       productName: 'P1-001订单',
      //       processProductName: 'P1-001产品',
      //       processStartTime: '2025-10-01 08:00',
      //       processEndTime: '2025-10-03 18:00',
      //       progress: 75,
      //       processCount: 500,
      //       status: '进行中',
      //       statusType: 'primary',
      //       color: '#409EFF'
      //     },
      //     {
      //       id: 'T002',
      //       productName: 'P2-005订单',
      //       processProductName: 'P2-005产品',
      //       processStartTime: '2025-10-04 08:00',
      //       processEndTime: '2025-10-07 18:00',
      //       progress: 30,
      //       processCount: 300,
      //       status: '进行中',
      //       statusType: 'primary',
      //       color: '#409EFF'
      //     },
      //     {
      //       id: 'T003',
      //       productName: 'P3-012订单',
      //       processProductName: 'P3-012产品',
      //       processStartTime: '2025-10-08 08:00',
      //       processEndTime: '2025-10-12 18:00',
      //       progress: 0,
      //       processCount: 800,
      //       status: '待开始',
      //       statusType: 'warning',
      //       color: '#E6A23C'
      //     }
      //   ]
      // },
      // {
      //   id: 'A-2',
      //   equipName: 'A-2生产线',
      //   equipType: '注塑设备',
      //   status: '运行中',
      //   statusType: 'success',
      //   utilization: 92,
      //   tasks: [
      //     {
      //       id: 'T004',
      //       productName: 'P1-003订单',
      //       processProductName: 'P1-003产品',
      //       processStartTime: '2025-10-01 08:00',
      //       processEndTime: '2025-10-02 18:00',
      //       progress: 100,
      //       processCount: 200,
      //       status: '已完成',
      //       statusType: 'success',
      //       color: '#67C23A'
      //     },
      //     {
      //       id: 'T005',
      //       productName: 'P2-008订单',
      //       processProductName: 'P2-008产品',
      //       processStartTime: '2025-10-03 08:00',
      //       processEndTime: '2025-10-06 18:00',
      //       progress: 60,
      //       processCount: 400,
      //       status: '进行中',
      //       statusType: 'primary',
      //       color: '#409EFF'
      //     },
      //     {
      //       id: 'T006',
      //       productName: 'P3-015订单',
      //       processProductName: 'P3-015产品',
      //       processStartTime: '2025-10-07 08:00',
      //       processEndTime: '2025-10-11 18:00',
      //       progress: 15,
      //       processCount: 600,
      //       status: '延期',
      //       statusType: 'danger',
      //       color: '#F56C6C'
      //     }
      //   ]
      // },
      // {
      //   id: 'B-1',
      //   equipName: 'B-1生产线',
      //   equipType: '装配设备',
      //   status: '维护中',
      //   statusType: 'warning',
      //   utilization: 45,
      //   tasks: [
      //     {
      //       id: 'T007',
      //       productName: '设备维护订单',
      //       processProductName: '维护作业产品',
      //       processStartTime: '2025-10-01 08:00',
      //       processEndTime: '2025-10-03 18:00',
      //       progress: 80,
      //       processCount: 0,
      //       status: '进行中',
      //       statusType: 'primary',
      //       color: '#909399'
      //     },
      //     {
      //       id: 'T008',
      //       productName: 'P1-010装配订单',
      //       processProductName: 'P1-010产品',
      //       processStartTime: '2025-10-04 08:00',
      //       processEndTime: '2025-10-08 18:00',
      //       progress: 0,
      //       processCount: 150,
      //       status: '待开始',
      //       statusType: 'warning',
      //       color: '#E6A23C'
      //     }
      //   ]
      // },
      // {
      //   id: 'C-1',
      //   equipName: 'C-1生产线',
      //   equipType: '包装设备',
      //   status: '运行中',
      //   statusType: 'success',
      //   utilization: 78,
      //   tasks: [
      //     {
      //       id: 'T009',
      //       productName: 'P2-020包装订单',
      //       processProductName: 'P2-020产品',
      //       processStartTime: '2025-10-02 08:00',
      //       processEndTime: '2025-10-05 18:00',
      //       progress: 90,
      //       processCount: 1000,
      //       status: '进行中',
      //       statusType: 'primary',
      //       color: '#409EFF'
      //     },
      //     {
      //       id: 'T010',
      //       productName: 'P3-025包装订单',
      //       processProductName: 'P3-025产品',
      //       processStartTime: '2025-10-06 08:00',
      //       processEndTime: '2025-10-10 18:00',
      //       progress: 40,
      //       processCount: 750,
      //       status: '进行中',
      //       statusType: 'primary',
      //       color: '#409EFF'
      //     }
      //   ]
      // },
      // {
      //   id: 'C-2',
      //   equipName: 'C-2生产线',
      //   equipType: '包装设备',
      //   status: '空闲',
      //   statusType: 'info',
      //   utilization: 25,
      //   tasks: [
      //     {
      //       id: 'T011',
      //       productName: 'P1-030包装订单',
      //       processProductName: 'P1-030产品',
      //       processStartTime: '2025-10-08 08:00',
      //       processEndTime: '2025-10-12 18:00',
      //       progress: 0,
      //       processCount: 500,
      //       status: '待开始',
      //       statusType: 'warning',
      //       color: '#E6A23C'
      //     }
      //   ]
      // }
    // ]

    // ============== 2. 计算属性 ==============

    /**
     * 过滤后的设备列表
     */
    const filteredDevices = computed(() => {
      debugger
      if (!searchKeyword.value) return devicesData.value
      
      const keyword = searchKeyword.value.toLowerCase()
      return devicesData.value.filter(device => {
        const matchDevice = device.equipName.toLowerCase().includes(keyword) ||
                           device.equipType.toLowerCase().includes(keyword)
        const matchTasks = device.tasks.some(task => 
          task.productName.toLowerCase().includes(keyword) ||
          task.processProductName.toLowerCase().includes(keyword)
        )
        return matchDevice || matchTasks
      })
    })

    /**
     * 时间轴数据
     */
    const timelineData = computed(() => {
      const [startDate, endDate] = dateRange.value
      const timeline = []
      const unit = timeUnit.value
      
      let current = new Date(startDate)
      const end = new Date(endDate)
      
      while (current <= end) {
        const timeSlot = generateTimeSlot(current, unit)
        timeline.push(timeSlot)
        
        // 根据单位递增时间
        switch (unit) {
          case 'hour':
            current.setHours(current.getHours() + 1)
            break
          case 'day':
            current.setDate(current.getDate() + 1)
            break
          case 'week':
            current.setDate(current.getDate() + 7)
            break
          case 'month':
            current.setMonth(current.getMonth() + 1)
            break
        }
      }
      
      return timeline
    })

    // ============== 3. 工具函数 ==============

    /**
     * 生成时间槽
     */
    const generateTimeSlot = (date, unit) => {
      const now = new Date()
      const isToday = isSameDay(date, now)
      const isWeekend = date.getDay() === 0 || date.getDay() === 6
      
      let label, subLabel, width, key
      
      switch (unit) {
        case 'hour':
          label = `${date.getHours()}:00`
          subLabel = formatDate(date, 'MM-DD')
          width = 60
          key = formatDate(date, 'YYYY-MM-DD-HH')
          break
        case 'day':
          label = formatDate(date, 'MM-DD')
          subLabel = ['日', '一', '二', '三', '四', '五', '六'][date.getDay()]
          width = 80
          key = formatDate(date, 'YYYY-MM-DD')
          break
        case 'week':
          const weekStart = new Date(date)
          weekStart.setDate(date.getDate() - date.getDay())
          label = `${formatDate(weekStart, 'MM-DD')} - ${formatDate(new Date(weekStart.getTime() + 6 * 24 * 60 * 60 * 1000), 'MM-DD')}`
          subLabel = `第${getWeekOfYear(date)}周`
          width = 120
          key = `week-${getWeekOfYear(date)}`
          break
        case 'month':
          label = formatDate(date, 'YYYY年MM月')
          subLabel = ''
          width = 100
          key = formatDate(date, 'YYYY-MM')
          break
      }
      
      return {
        key,
        label,
        subLabel,
        width,
        isToday,
        isWeekend,
        date: new Date(date)
      }
    }

    /**
     * 格式化日期
     */
    const formatDate = (date, format) => {
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const hour = String(date.getHours()).padStart(2, '0')
      
      return format
        .replace('YYYY', year)
        .replace('MM', month)
        .replace('DD', day)
        .replace('HH', hour)
    }

    /**
     * 判断是否同一天
     */
    const isSameDay = (date1, date2) => {
      return date1.getFullYear() === date2.getFullYear() &&
             date1.getMonth() === date2.getMonth() &&
             date1.getDate() === date2.getDate()
    }

    /**
     * 获取一年中的第几周
     */
    const getWeekOfYear = (date) => {
      const start = new Date(date.getFullYear(), 0, 1)
      const days = Math.floor((date - start) / (24 * 60 * 60 * 1000))
      return Math.ceil((days + start.getDay() + 1) / 7)
    }

    /**
     * 获取利用率颜色
     */
    const getUtilizationColor = (utilization) => {
      if (utilization >= 80) return '#67C23A'
      if (utilization >= 60) return '#E6A23C'
      if (utilization >= 40) return '#409EFF'
      return '#F56C6C'
    }

    /**
     * 计算任务条样式
     */
    const getTaskStyle = (task) => {
      const startDate = new Date(task.processStartTime)
      const endDate = new Date(task.processEndTime)
      const [rangeStart] = dateRange.value
      const timelineStart = new Date(rangeStart)
      
      // 计算任务开始位置
      const startOffset = Math.max(0, (startDate - timelineStart) / (24 * 60 * 60 * 1000))
      const duration = (endDate - startDate) / (24 * 60 * 60 * 1000)
      
      const slotWidth = 80 // 每天80px
      
      return {
        left: startOffset * slotWidth + 'px',
        width: Math.max(20, duration * slotWidth) + 'px',
        backgroundColor: task.color,
        opacity: task.progress === 0 ? 0.6 : 1
      }
    }

    // ============== 4. 事件处理 ==============

    /**
     * 时间单位改变
     */
    const onTimeUnitChange = () => {
      ElMessage.info(`时间单位已切换为：${timeUnit.value}`)
      loadGanttData()
    }

    /**
     * 日期范围改变
     */
    const onDateRangeChange = () => {
      if (dateRange.value && dateRange.value.length === 2) {
        ElMessage.info(`时间范围已更新：${dateRange.value[0]} 至 ${dateRange.value[1]}`)
        loadGanttData()
      }
    }

    /**
     * 搜索
     */
    const onSearch = () => {
      // 搜索逻辑在computed中处理
    }

    /**
     * 选择设备
     */
    const selectDevice = (deviceId) => {
      selectedDeviceId.value = selectedDeviceId.value === deviceId ? null : deviceId
    }

    /**
     * 选择任务
     */
    const selectTask = (task) => {
      // 为任务添加设备名称
      const device = devicesData.value.find(d => d.tasks.some(t => t.id === task.id))
      task.deviceName = device ? device.equipName : ''
      
      selectedTask.value = task
      ElMessage.info(`已选择任务：${task.productName}`)
    }

    /**
     * 显示任务提示
     */
    const showTaskTooltip = (task, event) => {
      const device = devicesData.value.find(d => d.tasks.some(t => t.id === task.id))
      task.deviceName = device ? device.equipName : ''
      
      selectedTask.value = task
      tooltipVisible.value = true
      
      const rect = event.target.getBoundingClientRect()
      tooltipStyle.value = {
        position: 'fixed',
        left: rect.left + 'px',
        top: rect.top - 10 + 'px',
        transform: 'translateY(-100%)',
        zIndex: 1000
      }
    }

    /**
     * 隐藏任务提示
     */
    const hideTaskTooltip = () => {
      tooltipVisible.value = false
    }

    /**
     * 加载甘特图数据
     */
    const loadGanttData = async () => {
      try {
        const parameter = {
          timeUnit: timeUnit.value,
          startDate: dateRange.value[0],
          endDate: dateRange.value[1]
        }
        
        console.log('请求参数：', parameter)
        
        const response = await apsSchedulingResultApi.queryGanttChart(parameter)
        
        console.log('甘特图返回数据：', response)
        
        if (response && response.code === 200) {
          ElMessage.success('甘特图数据加载成功')
          // TODO: 处理返回的数据，更新 devicesData
          devicesData.value = response.data
          console.log('devicesData：', devicesData.value)
        } else {
          ElMessage.warning(response?.message || '加载甘特图数据失败')
        }
      } catch (error) {
        console.error('加载甘特图数据失败：', error)
        ElMessage.error('加载甘特图数据失败：' + error.message)
      }
    }

    /**
     * 刷新数据
     */
    const refreshData = () => {
      loadGanttData()
    }

    // ============== 5. 生命周期 ==============

    onMounted(() => {
      debugger;
      ElMessage.success('生产调度甘特图加载完成')
      // 初始化时加载甘特图数据
      loadGanttData()
    })

    return {
      // 响应式数据
      timeUnit,
      dateRange,
      searchKeyword,
      selectedDeviceId,
      selectedTask,
      tooltipVisible,
      tooltipStyle,
      ganttMainRef,
      ganttChartRef,
      // 计算属性
      filteredDevices,
      timelineData,
      // 方法
      onTimeUnitChange,
      onDateRangeChange,
      onSearch,
      selectDevice,
      selectTask,
      showTaskTooltip,
      hideTaskTooltip,
      refreshData,
      loadGanttData,
      getUtilizationColor,
      getTaskStyle
    }
  }
}
</script>

<style scoped>
.gantt-container {
  width: 100%;
  height: 100vh;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}

/* 控制栏 */
.gantt-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 2px solid #f0f0f0;
  background: linear-gradient(135deg, #714B67 0%, #922575 100%);
  color: white;
}

.header-left .title {
  font-size: 24px;
  font-weight: 700;
  margin-right: 20px;
}

.header-left .subtitle {
  font-size: 14px;
  opacity: 0.9;
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 20px;
}

.control-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.control-group label {
  font-size: 14px;
  white-space: nowrap;
  color: white;
}

/* 甘特图主体 */
.gantt-main {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* 左侧设备列表 */
.gantt-sidebar {
  width: 300px;
  border-right: 2px solid #e0e0e0;
  background-color: #fafafa;
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  display: flex;
  padding: 15px 10px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #e0e0e0;
  font-weight: 600;
  color: #333;
}

.device-column {
  flex: 2;
  padding: 0 10px;
}

.status-column {
  flex: 1;
  text-align: center;
}

.utilization-column {
  flex: 1;
  text-align: center;
}

.sidebar-body {
  flex: 1;
  overflow-y: auto;
}

.device-row {
  display: flex;
  padding: 15px 10px;
  border-bottom: 1px solid #e8e8e8;
  cursor: pointer;
  transition: all 0.3s ease;
}

.device-row:hover {
  background-color: #f0f0f0;
}

.device-row.selected {
  background-color: #e8f4ff;
  border-left: 4px solid #409EFF;
}

.device-row .device-column {
  flex: 2;
}

.device-name {
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.device-info {
  font-size: 12px;
  color: #666;
}

.device-row .status-column {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.device-row .utilization-column {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.utilization-bar {
  position: relative;
  width: 60px;
  height: 16px;
  background-color: #e8e8e8;
  border-radius: 8px;
  overflow: hidden;
}

.utilization-fill {
  height: 100%;
  border-radius: 8px;
  transition: width 0.3s ease;
}

.utilization-text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #333;
  font-weight: 600;
}

/* 右侧甘特图表 */
.gantt-chart {
  flex: 1;
  overflow: auto;
  position: relative;
}

/* 时间轴头部 */
.timeline-header {
  display: flex;
  background-color: #f8f9fa;
  border-bottom: 2px solid #e0e0e0;
  position: sticky;
  top: 0;
  z-index: 10;
}

.time-slot {
  border-right: 1px solid #e8e8e8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 5px;
  min-height: 60px;
}

.time-label {
  font-weight: 600;
  color: #333;
  font-size: 13px;
}

.time-sub {
  font-size: 11px;
  color: #666;
  margin-top: 2px;
}

/* 甘特图内容 */
.gantt-content {
  position: relative;
}

.gantt-row {
  position: relative;
  height: 60px;
  border-bottom: 1px solid #e8e8e8;
}

.gantt-row.selected {
  background-color: #e8f4ff;
}

.time-slots {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.time-slot-bg {
  border-right: 1px solid #e8e8e8;
  height: 100%;
}

.time-slot-bg.weekend {
  background-color: #f5f5f5;
}

.time-slot-bg.today {
  background-color: #fff7e6;
  border-left: 2px solid #E6A23C;
}

/* 任务条 */
.tasks-container {
  position: relative;
  height: 100%;
  pointer-events: none;
}

.task-bar {
  position: absolute;
  top: 8px;
  height: 44px;
  border-radius: 6px;
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.task-bar:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.task-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px;
  height: 30px;
}

.task-name {
  color: white;
  font-size: 12px;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.task-progress {
  color: white;
  font-size: 11px;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  margin-left: 8px;
}

.task-progress-bar {
  height: 4px;
  background-color: rgba(255, 255, 255, 0.3);
  margin: 0 8px;
  border-radius: 2px;
  overflow: hidden;
}

.task-progress-fill {
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  transition: width 0.3s ease;
}

/* 提示框 */
.task-tooltip {
  background: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 12px;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  max-width: 300px;
}

.tooltip-title {
  font-weight: 600;
  margin-bottom: 8px;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 4px;
}

.tooltip-content div {
  margin: 4px 0;
  color: #f0f0f0;
}

/* 图例 */
.gantt-legend {
  padding: 15px 20px;
  background-color: #f9f9f9;
  border-top: 1px solid #e0e0e0;
}

.legend-title {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
}

.legend-items {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend-color {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .gantt-sidebar {
    width: 250px;
  }
  
  .header-controls {
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .control-group {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 768px) {
  .gantt-header {
    flex-direction: column;
    gap: 15px;
  }
  
  .gantt-sidebar {
    width: 200px;
  }
  
  .time-slot {
    min-width: 60px;
  }
  
  .task-name {
    font-size: 10px;
  }
}
</style>